<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
  </head>
  <body>
    <div id="app">
      <van-button type="primary">主要按钮</van-button>

      <van-cell-group inset>
        <van-cell title="单元格" value="内容" />
      </van-cell-group>
    </div>
    <script>
      // 调用函数组件，弹出一个 Toast
      // vant.Toast("提示");

      // 实例化Vue对象，并进行渲染组件
      new Vue({
        el: "#app",
        // 在 #app 标签下渲染一个按钮组件
        // template: `<van-button type="primary">主要按钮</van-button>`,
      });

      // 通过 CDN 引入时不会自动注册组件,使用use()手动注册
      Vue.use(Button);
      Vue.use(CellGroup);
    </script>
  </body>
</html>
